<template>
  <div>
      <el-row>
        <el-form :inline="true" style="margin-bottom: -22px;" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()" @submit.native.prevent>
          <el-form-item prop="siteId">
            <el-select v-model="searchForm.siteId" placeholder="请选择站点" size="small">
              <el-option
                v-for="item in siteList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="name">
            <el-input size="small" v-model="searchForm.name" placeholder="栏目名称" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="refreshList()" size="small">查询</el-button>
            <el-button @click="resetSearch()" size="small">重置</el-button>
            <el-button v-if="hasPermission('cms:column:cmsColumn:add')" type="primary" size="small" icon="el-icon-plus" @click="add()">新建</el-button>
          </el-form-item>
        </el-form>
      </el-row>
    <el-treetable
      border
      :data="dataList"
      isBigData
      max-height="1200"
      isTreeTable
      size="medium"
      v-loading = "loading"
      row-key="id"
      class="table">
    <el-treetable-column
        prop="name"
        show-overflow-tooltip
        label="名称"
        width="150">
      </el-treetable-column>
      <el-treetable-column
        prop="siteId"
        show-overflow-tooltip
        label="所属站点"
        width="180">
        <template slot-scope="scope">
          {{ getSiteNameById(scope.row.siteId)}}
        </template>
      </el-treetable-column>
    <el-treetable-column
        prop="model.name"
        show-overflow-tooltip
        label="模型名称"
        width="100">
      </el-treetable-column>
    <el-treetable-column
        prop="image"
        show-overflow-tooltip
        label="图标"
        width="50">
      <template slot-scope="scope">
        <div style="text-align: center"><i :class="scope.row.image"></i></div>
      </template>
      </el-treetable-column>
      <el-treetable-column
        prop="sort"
        show-overflow-tooltip
        label="排序"
        width="80">
      </el-treetable-column>
    <el-treetable-column
        prop="href"
        show-overflow-tooltip
        label="链接"
        width="120">
      </el-treetable-column>
    <el-treetable-column
        prop="enableFlag"
        align="center"
        label="启用标记"
        width="100">
      <template slot-scope="scope">
        <span v-bind:class="{'text-success':scope.row.enableFlag==='1','text-danger':scope.row.enableFlag!=='1'}">
          <i class="fa fa-circle"></i>
        </span>
      </template>
      </el-treetable-column>
    <el-treetable-column
        prop="homeFlag"
        align="center"
        label="首页显示"
        width="100">
      <template slot-scope="scope">
        <span v-bind:class="{'text-success':scope.row.homeFlag==='1','text-danger':scope.row.homeFlag!=='1'}">
          <i class="fa fa-circle"></i>
        </span>
      </template>
      </el-treetable-column>
    <el-treetable-column
        prop="commentFlag"
        label="允许评论"
        align="center"
        width="100">
      <template slot-scope="scope">
        <span v-bind:class="{'text-success':scope.row.commentFlag==='1','text-danger':scope.row.commentFlag!=='1'}">
          <i class="fa fa-circle"></i>
        </span>
      </template>
      </el-treetable-column>
    <el-treetable-column
        prop="auditFlag"
        label="需要审核"
        align="center"
        width="100">
      <template slot-scope="scope">
        <span v-bind:class="{'text-success':scope.row.auditFlag==='1','text-danger':scope.row.auditFlag!=='1'}">
          <i class="fa fa-circle"></i>
        </span>
      </template>
      </el-treetable-column>
    <el-treetable-column
        prop="keywords"
        show-overflow-tooltip
        label="关键字"
        width="100">
      </el-treetable-column>
    <el-treetable-column
        prop="description"
        show-overflow-tooltip
        label="描述"
        width="100">
      </el-treetable-column>
    <el-treetable-column
        prop="paramConfig"
        show-overflow-tooltip
        label="参数配置"
        width="100">
      </el-treetable-column>
    <el-treetable-column
        prop="hits"
        show-overflow-tooltip
        label="点击数"
        width="80">
      </el-treetable-column>
    <el-treetable-column
        prop="updateDate"
        show-overflow-tooltip
        label="更新时间"
        width="165">
      </el-treetable-column>
      <el-treetable-column
        header-align="center"
        align="center"
        fixed="right"
        width="300"
        label="操作">
        <template  slot-scope="scope">
          <el-button v-if="hasPermission('cms:column:cmsColumn:view')" type="text" size="small" icon="el-icon-view" @click="view(scope.row.id)">查看</el-button>
          <el-button v-if="hasPermission('cms:column:cmsColumn:edit')" type="text" size="small" icon="el-icon-edit" @click="edit(scope.row.id)">修改</el-button>
          <el-button v-if="hasPermission('cms:column:cmsColumn:del')" type="text" size="small" icon="el-icon-delete" @click="del(scope.row.id)">删除</el-button>
          <el-button v-if="hasPermission('cms:column:cmsColumn:add')" type="text" size="small" icon="el-icon-circle-plus-outline" @click="addChild(scope.row.id, scope.row.name, scope.row.siteId)">添加下级栏目</el-button>
        </template>
      </el-treetable-column>
    </el-treetable>
        <!-- 弹窗, 新增 / 修改 -->
    <CmsColumnForm  ref="cmsColumnForm" @refreshDataList="refreshList" :site-list="siteList"></CmsColumnForm>
  </div>
</template>

<script>
import CmsColumnForm from './CmsColumnForm'

export default {
  data () {
    return {
      searchForm: {
        name: '',
        siteId: ''
      },
      dataList: [],
      loading: false,
      siteList: []
    }
  },
  components: {
    CmsColumnForm
  },
  created () {
    this.getSiteList()
  },
  activated () {

  },

  methods: {
        // 新增下级
    addChild (id, name, siteId) {
      this.$refs.cmsColumnForm.init('addChild', {id: '', siteId: siteId, parent: {id: id, name: name}})
    },
       // 新增
    add () {
      this.$refs.cmsColumnForm.init('add', {id: '', siteId: this.searchForm.siteId, parent: {id: '', name: ''}})
    },
      // 修改
    edit (id) {
      this.$refs.cmsColumnForm.init('edit', {id: id, parent: {id: '', name: ''}})
    },
      // 查看
    view (id) {
      this.$refs.cmsColumnForm.init('view', {id: id, parent: {id: '', name: ''}})
    },
      // 删除
    del (id) {
      this.$confirm(`确定删除所选项吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        this.$http({
          url: '/cms/column/cmsColumn/delete',
          method: 'delete',
          params: {'id': id}
        }).then(({data}) => {
          if (data && data.success) {
            this.$message.success(data.msg)
            this.refreshList()
          }
          this.loading = false
        })
      })
    },
    resetSearch () {
      this.$refs.searchForm.resetFields()
      this.refreshList()
    },
    // 获取数据列表
    refreshList () {
      this.loading = true
      this.$http({
        url: '/cms/column/cmsColumn/treeData',
        method: 'get',
        params: {
          ...this.searchForm
        }
      }).then(({data}) => {
        this.dataList = data.treeData
        this.loading = false
      })
    },
    // 获取站点列表
    getSiteList () {
      this.$http({
        url: '/cms/site/cmsSite/allList',
        params: {},
        method: 'get'
      }).then(({data}) => {
        this.siteList = data.data
        if (this.searchForm.siteId === '' && this.siteList && this.siteList.length > 0) {
          this.searchForm.siteId = this.siteList[0].id
          this.refreshList()
        }
      })
    },
    getSiteNameById (siteId) {
      let site = this.siteList.find(ele => ele.id === siteId)
      return site ? site.name : ''
    }
  }
}
</script>
